<template>
  <div>
    <div class="select-content">
      <div class="first-select">
        <span @click="navClick('')">全部</span>
        <span v-for="(value,key,index) in navList" :key="index" :class="{'active': activeId == value.categoryId}" @click="navClick(value.categoryId)">
          {{value.categoryName}}
        </span>
        <!-- <span class="active">实拍视频</span>
        <span>AE模板</span> -->
        <slot name='selName'></slot>
      </div>
      <div class="second-select" v-if="activeId !== ''">
        <span v-for="(item,index) in navChild" :key="index" :class="{'activeChild': childActiveId == item.categoryId}" @click="navChildClick(item.categoryId)">
          {{item.categoryName}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import $http from "@/api/home/home"
export default {
  data() {
    return {
      activeId: '',
      childActiveId: '',
      navList: {},
      navChild: [],
      navArr: [],
    };
  },
  mounted() {
    this.cmsCategory();
  },
  methods: {
    init(data) {

      this.navArr.forEach(item => {
        if(item.categoryId == data) {
          if(item.parentId == 0) {
            this.activeId = data;
          } else {
            this.activeId = item.parentId;
            this.childActiveId = data;
          }
          this.navChild = this.navList[this.activeId].children;
          return;
        }
      })
    },
    /**
     * 点击栏目事件
     */
    navClick(id) {
      this.activeId = id;
      if(id !== "") {
        this.navChild = this.navList[id].children;
      }
      this.$parent.navClick(id);
    },
    navChildClick(id) {
      this.childActiveId = id;
      this.$parent.navClick(id);
    },
    /**
     * 获取栏目
     */
    cmsCategory() {
      let that = this;
      this.nav = [];
      this.nav2 = [];
      that.navArr = JSON.parse(sessionStorage.getItem("navList"));
      that.navList = {};
      that.navArr.forEach(item => {
        if(item.parentId == 0) {
          that.navList[item.categoryId] = item;
          that.navList[item.categoryId].children = [];
        } else {
          that.navList[item.parentId].children.push(item);
        }
      })
    },
  }
};
</script>

<style scoped>

.select-content{
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
}
.first-select, .second-select{
  display: flex;
  align-items: center;
  align-content: flex-start;
  padding: 0 40px;
  position: relative;
}
.second-select{
  border-top: 1px solid #d9dcde;
}
.first-select span, .second-select span {
  line-height: 50px;
  margin: 0 7px;
  font-size: var(--content);
  cursor: pointer;
}
.first-select span.active{
  color: var(--green);
  position: relative;
}
.second-select span.activeChild{
  color: var(--green);
  position: relative;
}
.first-select span.active::after{
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid transparent;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 100%;
  -webkit-transform: translate(-50%,-50%) rotate(45deg);
  transform: translate(-50%,-50%) rotate(45deg);
  border-top: 1px solid #d9dcde;
  border-left: 1px solid #d9dcde;
}
</style>
